<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    title="选择需替换项目"
    :before-close="beforeClose"
    append-to-body
    top="30px"
    width="1100px"
  >
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="担保客户查询"
          clearable
          @change="getListData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          @change="getListData()"
          v-model="params.org_class"
          :options="enumCustomerType"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          auto-top
          :bottom-level="2"
          placeholder="地址查询"
          clearable
          @change="getListData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryDate"
          class="w-100"
          type="month"
          placeholder="选择月"
          :picker-options="pickerOptions"
          @change="handleDateQuery()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getListData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('十二大产业贷')"
        >
          导出
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="handleSelects"
          icon="el-icon-folder-checked"
          type="primary"
          class="btn-long"
        >
          批量替换
        </el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      row-key="customer_related_id"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
      class="table-sm"
      :columns="tableColumns"
      :data="tableData"
    >
      <template v-slot:use="scope">
        <div class="text-truncate" :title="scope.row.funds_use_dir">
          {{ scope.row.funds_use_dir }}
        </div>
      </template>
      <template v-slot:status="scope">
        <div class="status-label" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.statusLabel }}
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div class="pl-3">
        <small class="text-muted">
          (已选择
          <span class="text-info">{{ selectLen }}</span>
          个项目)
        </small>
      </div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getListData"
      ></el-pagination>
    </div>

    <project-view-dialog
      :visible.sync="viewVisible"
      :batch-no="attachNo"
      :query-id="queryId"
    ></project-view-dialog>

    <attach-dialog :visible.sync="attachVisible" :project-data="attachProjectData"></attach-dialog>

    <replace-edit-dialog
      :visible.sync="replaceVisible"
      @success="handelSuccess"
      :batch-no="batchNo"
      :batch-id="batchId"
      :form-data="formData"
    ></replace-edit-dialog>
  </el-dialog>
</template>
<script>
import {
  pickerOptions,
  dataAdapter,
  enumCustomerType,
  enumReviewApproval,
  enumReviewStyle,
} from '@/bank/views/limit/index'

import ProjectViewDialog from '@/bank/views/business/limit/new/ProjectViewDialog'
import hndTableMixin from '@/bank/views/business/limit/history/mixins'
import SelectAddress from '@/components/select/SelectAddress'
import AttachDialog from '@/bank/views/limit/AttachDialog'
import ReplaceEditDialog from '@/bank/views/limit/replace/ReplaceEditDialog'
import { enumDispute } from '@/bank/plugins/enum'
export default {
  components: {
    ProjectViewDialog,
    SelectAddress,
    AttachDialog,
    ReplaceEditDialog,
  },
  mixins: [hndTableMixin],
  props: {
    visible: Boolean,
    batchId: String,
    batchNo: String,
  },
  data() {
    return {
      pickerOptions,
      enumCustomerType,
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        'is_replace.neq': 1,
      },
      queryDate: '',
      order: {
        create_time: 'desc',
      },
      tableName: 'datum_one_county_industry',
      tableColumns: [
        {
          attrs: {
            label: '选择',
            type: 'selection',
            align: 'center',
            width: 55,
            reserveSelection: true,
            selectable: this.onSelect,
          },
        },
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '贷款金额(万元)', prop: 'warranty_amount', align: 'center' } },
        { attrs: { label: '放款日期', prop: 'loadDate', align: 'center', minWidth: '100px' } },
        { attrs: { label: '还款日期', prop: 'loadEndDate', align: 'center', minWidth: '100px' } },
        {
          attrs: {
            label: '所属行业',
            prop: 'parent_main_business',
            align: 'center',
            minWidth: '110px',
          },
        },
        {
          attrs: { label: '十二大产业', prop: 'main_business', align: 'center', minWidth: '110px' },
        },
        { attrs: { label: '项目状态', prop: 'statusLabel', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '操作', align: 'center', width: '180px' },
          operations: [
            { name: '替换', event: this.handleSelect, ifRender: row => this.onSelect(row) },
            { name: '上传', event: this.handleUpload },
            { name: '查看', event: this.showCreditFile },
          ],
        },
      ],

      queryId: '',
      attachNo: '',
      viewVisible: false,

      attachProjectData: {},
      attachVisible: false,
      multipleSelection: [],
      replaceVisible: false,
      formData: [],
    }
  },
  computed: {
    selectLen() {
      return this.multipleSelection.length
    },
  },
  watch: {
    batchId: {
      handler: function () {
        this.getListData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    clearSelect() {
      this.multipleSelection = []
      const $tableRef = this.$refs.multipleTable.$children[0]
      $tableRef.clearSelection()
    },
    handelSuccess() {
      this.clearSelect()
      this.$emit('success', true)
      this.getListData()
    },
    getListData(index = 1) {
      if (!this.batchId) {
        return
      }
      this.params['project_apply_batch_id.eq'] = this.batchId
      this.getData(index)
    },
    beforeClose() {
      this.clearSelect()
      this.$emit('update:visible', false)
    },
    handleSelects() {
      if (this.selectLen < 1) {
        return this.$message.warning('请先选择需替换项目')
      }
      this.formData = this.multipleSelection
      this.replaceVisible = true
    },
    handleSelect(row) {
      this.formData = [{ ...row }]
      this.replaceVisible = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleUpload(row = {}) {
      this.attachProjectData = row
      this.attachVisible = true
    },
    onSelect(row) {
      // 在保并且未被替换过
      return [1].includes(+row.load_beh_status) && +row.is_replace !== 1
    },
    dataAdapter(item) {
      dataAdapter(item)
      item.isCertMerge = enumDispute[item.is_cert_merge]
      item.statusLabel = enumReviewApproval[item.review_approval]
      item.statusStyle = enumReviewStyle[item.review_approval]
      return item
    },
    handleDateQuery() {
      const startTime = this.queryDate
        ? `${this.queryDate.getFullYear()}-${this.queryDate.getMonth() + 1}-1`
        : ''
      const endTime = this.queryDate
        ? `${this.queryDate.getFullYear()}-${this.queryDate.getMonth() + 2}-1`
        : ''
      this.params['create_time.gte'] = startTime
      this.params['create_time.lt'] = endTime
      this.getListData()
    },
    showCreditFile(row = {}) {
      this.queryId = row.customer_related_id
      this.attachNo = row.project_approval_batch_bank_id || ''
      this.viewVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
